<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<!--组件 页面-->
<!-- Section - Bootstrap Brain Component -->
<div th:fragment="Pages">
    <!--空白页-->
    <section class="bsb-faq-3 pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Blank">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class="h6">Welcome to the Placeholder Page Template!</h2>
                </div>
            </div>
        </div>
    </section>
    <!--时间线页面-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="TimeLines">
        <div class="container">
            <div class="row gy-3 gy-md-4">
                <div class="col-12">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm bg-transparent">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Activity Timeline</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card widget-card bsb-timeline-8 border-light shadow-sm">
                                        <div class="card-body p-4">
                                            <h5 class="card-title widget-card-title mb-3">Recent Transactions</h5>

                                            <ul class="timeline">
                                                <li class="timeline-item">
                                                    <div class="timeline-body">
                                                        <div class="timeline-meta">
                                                            <span>32 minutes</span>
                                                        </div>
                                                        <div class="timeline-content timeline-indicator">
                                                            <h6 class="mb-1">Amount received in the PayPal gateway.</h6>
                                                            <span class="text-secondary fs-7">User: William Lucas</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="timeline-item">
                                                    <div class="timeline-body">
                                                        <div class="timeline-meta">
                                                            <span>49 minutes</span>
                                                        </div>
                                                        <div class="timeline-content timeline-indicator">
                                                            <h6 class="mb-1">New sale recorded in the Bootstrap admin templates.</h6>
                                                            <span class="text-secondary fs-7">Product: Console</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="timeline-item">
                                                    <div class="timeline-body">
                                                        <div class="timeline-meta">
                                                            <span>2 hours</span>
                                                        </div>
                                                        <div class="timeline-content timeline-indicator">
                                                            <h6 class="mb-1">User registered in the discount campaign.</h6>
                                                            <span class="text-secondary fs-7">Country: United States</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--组件 卡片-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Cards">
        <div class="container">
            <div class="row gy-3 gy-md-4">
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Basic</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card">
                                        <img th:src="@{/assets/img/card/card-img-1.jpg}" class="card-img-top" alt="Card Image">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                            <a href="#!" class="btn btn-primary">Go Somewhere</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Titles, Text, and Links</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                            <a href="#" class="card-link">Card link</a>
                                            <a href="#" class="card-link">Another link</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">List Groups</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card">
                                        <div class="card-header">
                                            Featured
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">An item</li>
                                            <li class="list-group-item">A second item</li>
                                            <li class="list-group-item">A third item</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Kitchen Sink</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card">
                                        <img th:src="@{/assets/img/card/card-img-1.jpg}" class="card-img-top" alt="Card Image">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">An item</li>
                                            <li class="list-group-item">A second item</li>
                                            <li class="list-group-item">A third item</li>
                                        </ul>
                                        <div class="card-body">
                                            <a href="#" class="card-link">Card link</a>
                                            <a href="#" class="card-link">Another link</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Card Styles</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card text-bg-primary mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Primary card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-secondary mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Secondary card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-success mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Success card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-danger mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Danger card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-warning mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Warning card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-info mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Info card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-light mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Light card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                    <div class="card text-bg-dark mb-3">
                                        <div class="card-header">Header</div>
                                        <div class="card-body">
                                            <h5 class="card-title">Dark card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Header and Footer</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card text-center">
                                        <div class="card-header">
                                            Featured
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title">Special title treatment</h5>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <a href="#" class="btn btn-primary">Go somewhere</a>
                                        </div>
                                        <div class="card-footer text-body-secondary">
                                            2 days ago
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--联系页面-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Contact">
        <div class="container">
            <div class="row gy-3 gy-md-4 gy-lg-0 align-items-md-center">
                <div class="col-12 col-lg-6">
                    <div class="row justify-content-xl-center">
                        <div class="col-12 col-xl-11">
                            <div class="d-flex mb-5">
                                <div class="me-4 text-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                              d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="mb-3">Address</h4>
                                    <address class="mb-0 text-secondary">8014 Edith Blvd NE, Albuquerque, New York, United States</address>
                                </div>
                            </div>
                            <div class="row mb-5">
                                <div class="col-12 col-sm-6">
                                    <div class="d-flex mb-5 mb-sm-0">
                                        <div class="me-4 text-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-telephone-outbound" viewBox="0 0 16 16">
                                                <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5z"/>
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 class="mb-3">Phone</h4>
                                            <p class="mb-0">
                                                <a class="link-secondary text-decoration-none" href="tel:+15057922430">(505) 792-2430</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <div class="d-flex mb-0">
                                        <div class="me-4 text-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-envelope-at" viewBox="0 0 16 16">
                                                <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
                                                <path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648Zm-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 class="mb-3">E-Mail</h4>
                                            <p class="mb-0">
                                                <a class="link-secondary text-decoration-none" href="/cdn-cgi/l/email-protection#7713121a18370e18020513181a161e195914181a"><span class="__cf_email__" data-cfemail="492d2c24260930263c3b2d2624282027672a2624">[email&#160;protected]</span></a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex">
                                <div class="me-4 text-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
                                        <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
                                        <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="mb-3">Opening Hours</h4>
                                    <div class="d-flex mb-1">
                                        <p class="text-secondary fw-bold mb-0 me-5">Mon - Fri</p>
                                        <p class="text-secondary mb-0">9am - 5pm</p>
                                    </div>
                                    <div class="d-flex">
                                        <p class="text-secondary fw-bold mb-0 me-5">Sat - Sun</p>
                                        <p class="text-secondary mb-0">9am - 2pm</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="bg-white border rounded shadow-sm overflow-hidden">

                        <form action="#!">
                            <div class="row gy-4 gy-xl-5 p-4 p-xl-5">
                                <div class="col-12">
                                    <label for="fullname" class="form-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="fullname" name="fullname" value="" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                    <div class="input-group">
                      <span class="input-group-text">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
                          <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
                        </svg>
                      </span>
                                        <input type="email" class="form-control" id="email" name="email" value="" required>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <div class="input-group">
                      <span class="input-group-text">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
                          <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
                        </svg>
                      </span>
                                        <input type="tel" class="form-control" id="phone" name="phone" value="">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="subject" name="subject" value="" required>
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
                                </div>
                                <div class="col-12">
                                    <div class="d-grid">
                                        <button class="btn btn-primary btn-lg" type="submit">Send Message</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--定价页面-->
    <section class="bsb-pricing-3 py-3 py-md-4 py-xl-5 bg-white" th:fragment="Pricing">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="container-fluid bg-light border pb-4 mt-md-6 shadow">
                        <div class="row">
                            <div class="col-12 col-md-4">
                                <div class="card border-0 bg-transparent">
                                    <div class="card-body p-4 p-xxl-5">
                                        <h2 class="h4 mb-2">Starter</h2>
                                        <p class="text-secondary m-0">Scale as you go from</p>
                                        <hr class="my-4 border-dark-subtle">
                                        <h4 class="display-3 fw-bold text-primary m-0">$45</h4>
                                        <p class="text-secondary m-0">USD / Month</p>
                                        <div class="d-grid gap-2 my-4">
                                            <a href="#!" class="btn btn-lg btn-outline-primary">Choose Plan</a>
                                        </div>
                                        <ul class="list-group list-group-flush m-0">
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>5</strong> Bootstrap Install</span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>100,000</strong> Visits</span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>30 GB</strong> Disk Space</span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                                                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                                </svg>
                                                <span>Free <strong>SSL and CDN</strong></span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                                                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                                </svg>
                                                <span>Free <strong>Support</strong></span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                                                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                                </svg>
                                                <span><strong>Weekly</strong> Reports</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="card bg-white border-0 border-top pt-md-6 shadow-sm bsb-pricing-popular">
                                    <div class="card-body position-relative p-4 p-xxl-5">
                                        <span class="badge text-bg-warning position-absolute top-0 start-50 translate-middle">Most Popular</span>
                                        <h2 class="h4 mb-2">Pro</h2>
                                        <p class="text-secondary m-0">30-day money back gurantee</p>
                                        <hr class="my-4 border-dark-subtle">
                                        <h4 class="display-3 fw-bold text-primary m-0">$75</h4>
                                        <p class="text-secondary m-0">USD / Month</p>
                                        <div class="d-grid gap-2 my-4">
                                            <a href="#!" class="btn btn-lg btn-primary">Choose Plan</a>
                                        </div>
                                        <ul class="list-group list-group-flush m-0">
                                            <li class="list-group-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>20</strong> Bootstrap Install</span>
                                            </li>
                                            <li class="list-group-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>250,000</strong> Visits</span>
                                            </li>
                                            <li class="list-group-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>50 GB</strong> Disk Space</span>
                                            </li>
                                            <li class="list-group-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span>Free <strong>SSL and CDN</strong></span>
                                            </li>
                                            <li class="list-group-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span>Free <strong>Support</strong></span>
                                            </li>
                                            <li class="list-group-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                                                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                                </svg>
                                                <span><strong>Weekly</strong> Reports</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="card border-0 bg-transparent">
                                    <div class="card-body p-4 p-xxl-5">
                                        <h2 class="h4 mb-2">Business</h2>
                                        <p class="text-secondary m-0">Free trial is available</p>
                                        <hr class="my-4 border-dark-subtle">
                                        <h4 class="display-3 fw-bold text-primary m-0">$125</h4>
                                        <p class="text-secondary m-0">USD / Month</p>
                                        <div class="d-grid gap-2 my-4">
                                            <a href="#!" class="btn btn-lg btn-outline-primary">Choose Plan</a>
                                        </div>
                                        <ul class="list-group list-group-flush m-0">
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>50</strong> Bootstrap Install</span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>400,000</strong> Visits</span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>100 GB</strong> Disk Space</span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span>Free <strong>SSL and CDN</strong></span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span>Free <strong>Support</strong></span>
                                            </li>
                                            <li class="list-group-item bg-transparent">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                </svg>
                                                <span><strong>Weekly</strong> Reports</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--统计页面-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Stats">
        <div class="container">
            <div class="row gy-3 gy-md-4">
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm bg-transparent">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Revenue Stats</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="row gy-3 gy-md-4">
                                        <div class="col-12 col-sm-6">
                                            <div class="card widget-card border-light shadow-sm">
                                                <div class="card-body p-4">
                                                    <div class="row">
                                                        <div class="col-8">
                                                            <h5 class="card-title widget-card-title mb-3">Sales</h5>
                                                            <h4 class="card-subtitle text-body-secondary m-0">$6,820</h4>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="d-flex justify-content-end">
                                                                <div class="lh-1 text-white bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center">
                                                                    <i class="bi bi-truck fs-4"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="d-flex align-items-center mt-3">
                                  <span class="lh-1 me-3 bg-danger-subtle text-danger rounded-circle p-1 d-flex align-items-center justify-content-center">
                                    <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                                  </span>
                                                                <div>
                                                                    <p class="fs-7 mb-0">-9%</p>
                                                                    <p class="fs-7 mb-0 text-secondary">since last week</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <div class="card widget-card border-light shadow-sm">
                                                <div class="card-body p-4">
                                                    <div class="row">
                                                        <div class="col-8">
                                                            <h5 class="card-title widget-card-title mb-3">Earnings</h5>
                                                            <h4 class="card-subtitle text-body-secondary m-0">$21,900</h4>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="d-flex justify-content-end">
                                                                <div class="lh-1 text-white bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center">
                                                                    <i class="bi bi-currency-dollar fs-4"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="d-flex align-items-center mt-3">
                                  <span class="lh-1 me-3 bg-success-subtle text-success rounded-circle p-1 d-flex align-items-center justify-content-center">
                                    <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                                  </span>
                                                                <div>
                                                                    <p class="fs-7 mb-0">+26%</p>
                                                                    <p class="fs-7 mb-0 text-secondary">since last week</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <div class="card widget-card border-light shadow-sm">
                                                <div class="card-body p-4">
                                                    <div class="row">
                                                        <div class="col-8">
                                                            <h5 class="card-title widget-card-title mb-3">Visitors</h5>
                                                            <h4 class="card-subtitle text-body-secondary m-0">3,764</h4>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="d-flex justify-content-end">
                                                                <div class="lh-1 text-white bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center">
                                                                    <i class="bi bi-person fs-4"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="d-flex align-items-center mt-3">
                                  <span class="lh-1 me-3 bg-success-subtle text-success rounded-circle p-1 d-flex align-items-center justify-content-center">
                                    <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                                  </span>
                                                                <div>
                                                                    <p class="fs-7 mb-0">+69%</p>
                                                                    <p class="fs-7 mb-0 text-secondary">since last week</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <div class="card widget-card border-light shadow-sm">
                                                <div class="card-body p-4">
                                                    <div class="row">
                                                        <div class="col-8">
                                                            <h5 class="card-title widget-card-title mb-3">Orders</h5>
                                                            <h4 class="card-subtitle text-body-secondary m-0">786</h4>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="d-flex justify-content-end">
                                                                <div class="lh-1 text-white bg-primary rounded-circle p-3 d-flex align-items-center justify-content-center">
                                                                    <i class="bi bi-cart fs-4"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="d-flex align-items-center mt-3">
                                  <span class="lh-1 me-3 bg-danger-subtle text-danger rounded-circle p-1 d-flex align-items-center justify-content-center">
                                    <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                                  </span>
                                                                <div>
                                                                    <p class="fs-7 mb-0">-21%</p>
                                                                    <p class="fs-7 mb-0 text-secondary">since last week</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm bg-transparent">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Traffic Stats</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card widget-card border-light shadow-sm bg-primary">
                                        <div class="card-body p-4">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-6">
                                                    <h5 class="card-title widget-card-title text-white mb-1">Traffic Stats</h5>
                                                    <p class="mb-0 fs-7 text-white">Overview</p>
                                                </div>
                                                <div class="col-6 d-flex align-items-center justify-content-end">
                            <span class="fs-1 bsb-w-85 bsb-h-85 text-white border border-3 border-primary-subtle rounded-circle d-flex align-items-center justify-content-center">
                              <i class="bi bi-stars bsb-rotate-45"></i>
                            </span>
                                                </div>
                                            </div>
                                            <div class="card mt-5 border-0">
                                                <div class="card-body">
                                                    <div class="row gy-4">
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Domain Rating</h6>
                                                                            <span class="fs-7 text-success">+13</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">92</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Referring Domains</h6>
                                                                            <span class="fs-7 text-danger">-1.2K</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">113K</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Backlinks</h6>
                                                                            <span class="fs-7 text-success">+932K</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">50.6M</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Organic Traffic</h6>
                                                                            <span class="fs-7 text-success">+2.1K</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">525K</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Organic Keywords</h6>
                                                                            <span class="fs-7 text-danger">-19.5K</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">142K</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Paid Traffic</h6>
                                                                            <span class="fs-7 text-success">+1.2K</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">49.1K</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row align-items-center">
                                                                <div class="col-8">
                                                                    <div class="d-flex align-items-center">
                                      <span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-3">
                                        <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                                      </span>
                                                                        <div>
                                                                            <h6 class="m-0">Paid Keywords</h6>
                                                                            <span class="fs-7 text-danger">-130</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <h6 class="h3 text-end m-0">2.5K</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card bg-transparent border-light shadow-sm">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Gateway Stats</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card widget-card border-light shadow-sm">
                                        <div class="card-body p-4">
                                            <h5 class="card-title widget-card-title mb-4">Payment Overview</h5>
                                            <div class="row gy-4">
                                                <div class="col-12">
                                                    <div class="row align-items-center">
                                                        <div class="col-8">
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                        <i class="bi bi-paypal"></i>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="m-0">PayPal</h6>
                                                                    <p class="text-secondary m-0 fs-7">Funds Received</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <h6 class="text-end">$5,432</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="row align-items-center">
                                                        <div class="col-8">
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                        <i class="bi bi-stripe"></i>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="m-0">Stripe</h6>
                                                                    <p class="text-secondary m-0 fs-7">Invoice Paid</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <h6 class="text-end">$325</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="row align-items-center">
                                                        <div class="col-8">
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                        <i class="bi bi-credit-card-fill"></i>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="m-0">Credit Card</h6>
                                                                    <p class="text-secondary m-0 fs-7">Top Up</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <h6 class="text-end">$99</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="row align-items-center">
                                                        <div class="col-8">
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                        <i class="bi bi-bank2"></i>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="m-0">Bank</h6>
                                                                    <p class="text-secondary m-0 fs-7">Check Deposited</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <h6 class="text-end">$2,432</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="row align-items-center">
                                                        <div class="col-8">
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                        <i class="bi bi-wallet-fill"></i>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="m-0">Wallet</h6>
                                                                    <p class="text-secondary m-0 fs-7">Bill Payment</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <h6 class="text-end">$750</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="row align-items-center">
                                                        <div class="col-8">
                                                            <div class="d-flex align-items-center">
                                                                <div>
                                                                    <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                        <i class="bi bi-arrow-up-left-circle-fill"></i>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="m-0">Refund</h6>
                                                                    <p class="text-secondary m-0 fs-7">Case Closed</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <h6 class="text-end">$289</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card bg-transparent border-light shadow-sm">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Social Stats</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card widget-card border-light shadow-sm bg-primary">
                                        <div class="card-body p-4">
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-6">
                                                    <h5 class="card-title widget-card-title text-white mb-1">Social Stats</h5>
                                                    <p class="mb-0 fs-7 text-white">Followers</p>
                                                </div>
                                                <div class="col-6 d-flex align-items-center justify-content-end">
                            <span class="fs-1 bsb-w-85 bsb-h-85 text-white border border-3 border-primary-subtle rounded-circle d-flex align-items-center justify-content-center">
                              <i class="bi bi-people"></i>
                            </span>
                                                </div>
                                            </div>
                                            <div class="card mt-5 border-0">
                                                <div class="card-body">
                                                    <div class="row gy-4">
                                                        <div class="col-12">
                                                            <div class="card bg-primary-subtle text-primary border-0">
                                                                <div class="card-body">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-8">
                                                                            <div class="d-flex align-items-center">
                                          <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-primary rounded-circle d-flex align-items-center justify-content-center me-2">
                                            <i class="bi bi-twitter-x"></i>
                                          </span>
                                                                                <div>
                                                                                    <h6 class="m-0">Twitter</h6>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <h6 class="h3 text-end m-0">786K</h6>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="card bg-success-subtle text-success border-0">
                                                                <div class="card-body">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-8">
                                                                            <div class="d-flex align-items-center">
                                          <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-success rounded-circle d-flex align-items-center justify-content-center me-2">
                                            <i class="bi bi-facebook"></i>
                                          </span>
                                                                                <div>
                                                                                    <h6 class="m-0">Facebook</h6>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <h6 class="h3 text-end m-0">42K</h6>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="card bg-danger-subtle text-danger border-0">
                                                                <div class="card-body">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-8">
                                                                            <div class="d-flex align-items-center">
                                          <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-danger rounded-circle d-flex align-items-center justify-content-center me-2">
                                            <i class="bi bi-github"></i>
                                          </span>
                                                                                <div>
                                                                                    <h6 class="m-0">Github</h6>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <h6 class="h3 text-end m-0">539M</h6>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="card bg-info-subtle text-info border-0">
                                                                <div class="card-body">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-8">
                                                                            <div class="d-flex align-items-center">
                                          <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-info rounded-circle d-flex align-items-center justify-content-center me-2">
                                            <i class="bi bi-youtube"></i>
                                          </span>
                                                                                <div>
                                                                                    <h6 class="m-0">YouTube</h6>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <h6 class="h3 text-end m-0">82K</h6>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="card bg-warning-subtle text-warning border-0">
                                                                <div class="card-body">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-8">
                                                                            <div class="d-flex align-items-center">
                                          <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-warning rounded-circle d-flex align-items-center justify-content-center me-2">
                                            <i class="bi bi-dribbble"></i>
                                          </span>
                                                                                <div>
                                                                                    <h6 class="m-0">Dribbble</h6>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <h6 class="h3 text-end m-0">176M</h6>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--发票页面-->
    <section class="py-3 py-md-4 py-xl-5 bg-white" th:fragment="Invoice">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-9 col-xl-8 col-xxl-7">
                    <div class="row gy-3 mb-3">
                        <div class="col-6">
                            <h2 class="text-uppercase text-endx m-0">Invoice</h2>
                        </div>
                        <div class="col-6">
                            <a class="d-block text-end" href="#!">
                                <img th:src="@{/assets/img/branding/console-logo.svg}" class="img-fluid" alt="Logo" width="135" height="44">
                            </a>
                        </div>
                        <div class="col-12">
                            <h4>From</h4>
                            <address>
                                <strong>Company</strong><br>
                                875 N Coast Hwybr<br>
                                Laguna Beach, California, 92651<br>
                                United States<br>
                                Phone: (949) 494-7695<br>
                                Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690c04080005290d0604080007470a0604">[email&#160;protected]</a>
                            </address>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12 col-sm-6 col-md-8">
                            <h4>Bill To</h4>
                            <address>
                                <strong>Mason Carter</strong><br>
                                7657 NW Prairie View Rd<br>
                                Kansas City, Mississippi, 64151<br>
                                United States<br>
                                Phone: (816) 741-5790<br>
                                Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c0c8c4ccc9e5c6c9ccc0cbd18bc6cac8">[email&#160;protected]</a>
                            </address>
                        </div>
                        <div class="col-12 col-sm-6 col-md-4">
                            <h4 class="row">
                                <span class="col-6">Invoice #</span>
                                <span class="col-6 text-sm-end">INT-001</span>
                            </h4>
                            <div class="row">
                                <span class="col-6">Account</span>
                                <span class="col-6 text-sm-end">786-54984</span>
                                <span class="col-6">Order ID</span>
                                <span class="col-6 text-sm-end">#9742</span>
                                <span class="col-6">Invoice Date</span>
                                <span class="col-6 text-sm-end">12/10/2025</span>
                                <span class="col-6">Due Date</span>
                                <span class="col-6 text-sm-end">18/12/2025</span>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th scope="col" class="text-uppercase">Qty</th>
                                        <th scope="col" class="text-uppercase">Product</th>
                                        <th scope="col" class="text-uppercase text-end">Unit Price</th>
                                        <th scope="col" class="text-uppercase text-end">Amount</th>
                                    </tr>
                                    </thead>
                                    <tbody class="table-group-divider">
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Console - Bootstrap Admin Template</td>
                                        <td class="text-end">75</td>
                                        <td class="text-end">150</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Planet - Bootstrap Blog Template</td>
                                        <td class="text-end">29</td>
                                        <td class="text-end">29</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>Hello - Bootstrap Business Template</td>
                                        <td class="text-end">32</td>
                                        <td class="text-end">128</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Palette - Bootstrap Startup Template</td>
                                        <td class="text-end">55</td>
                                        <td class="text-end">55</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-end">Subtotal</td>
                                        <td class="text-end">362</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-end">VAT (5%)</td>
                                        <td class="text-end">18.1</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-end">Shipping</td>
                                        <td class="text-end">15</td>
                                    </tr>
                                    <tr>
                                        <th scope="row" colspan="3" class="text-uppercase text-end">Total</th>
                                        <td class="text-end">$495.1</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary mb-3">Download Invoice</button>
                            <button type="submit" class="btn btn-danger mb-3">Submit Payment</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--个人资料页面-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Profile">
        <div class="container">
            <div class="row gy-4 gy-lg-0">
                <div class="col-12 col-lg-4 col-xl-3">
                    <div class="row gy-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header text-bg-primary">Welcome, Ethan Leo</div>
                                <div class="card-body">
                                    <div class="text-center mb-3">
                                        <img th:src="@{/assets/img/profile/profile-img-1.jpg}" class="img-fluid rounded-circle" alt="Luna John">
                                    </div>
                                    <h5 class="text-center mb-1">Ethan Leo</h5>
                                    <p class="text-center text-secondary mb-4">Project Manager</p>
                                    <ul class="list-group list-group-flush mb-4">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <h6 class="m-0">Followers</h6>
                                            <span>7,854</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <h6 class="m-0">Following</h6>
                                            <span>5,987</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <h6 class="m-0">Friends</h6>
                                            <span>4,620</span>
                                        </li>
                                    </ul>
                                    <div class="d-grid m-0">
                                        <button class="btn btn-outline-primary" type="button">Follow</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header text-bg-primary">Social Accounts</div>
                                <div class="card-body">
                                    <a href="#!" class="d-inline-block bg-dark link-light lh-1 p-2 rounded">
                                        <i class="bi bi-youtube"></i>
                                    </a>
                                    <a href="#!" class="d-inline-block bg-dark link-light lh-1 p-2 rounded">
                                        <i class="bi bi-twitter-x"></i>
                                    </a>
                                    <a href="#!" class="d-inline-block bg-dark link-light lh-1 p-2 rounded">
                                        <i class="bi bi-facebook"></i>
                                    </a>
                                    <a href="#!" class="d-inline-block bg-dark link-light lh-1 p-2 rounded">
                                        <i class="bi bi-linkedin"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header text-bg-primary">About Me</div>
                                <div class="card-body">
                                    <ul class="list-group list-group-flush mb-0">
                                        <li class="list-group-item">
                                            <h6 class="mb-1">
                                                <span class="bii bi-mortarboard-fill me-2"></span>
                                                Education
                                            </h6>
                                            <span>M.S Computer Science</span>
                                        </li>
                                        <li class="list-group-item">
                                            <h6 class="mb-1">
                                                <span class="bii bi-geo-alt-fill me-2"></span>
                                                Location
                                            </h6>
                                            <span>Mountain View, California</span>
                                        </li>
                                        <li class="list-group-item">
                                            <h6 class="mb-1">
                                                <span class="bii bi-building-fill-gear me-2"></span>
                                                Company
                                            </h6>
                                            <span>GitHub Inc</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header text-bg-primary">Skills</div>
                                <div class="card-body">
                                    <span class="badge text-bg-primary">HTML</span>
                                    <span class="badge text-bg-primary">SCSS</span>
                                    <span class="badge text-bg-primary">Javascript</span>
                                    <span class="badge text-bg-primary">React</span>
                                    <span class="badge text-bg-primary">Vue</span>
                                    <span class="badge text-bg-primary">Angular</span>
                                    <span class="badge text-bg-primary">UI</span>
                                    <span class="badge text-bg-primary">UX</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-8 col-xl-9">
                    <div class="card widget-card border-light shadow-sm">
                        <div class="card-body p-4">
                            <ul class="nav nav-tabs" id="profileTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview-tab-pane" type="button" role="tab" aria-controls="overview-tab-pane" aria-selected="true">Overview</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email-tab-pane" type="button" role="tab" aria-controls="email-tab-pane" aria-selected="false">Emails</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password-tab-pane" type="button" role="tab" aria-controls="password-tab-pane" aria-selected="false">Password</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-4" id="profileTabContent">
                                <div class="tab-pane fade show active" id="overview-tab-pane" role="tabpanel" aria-labelledby="overview-tab" tabindex="0">
                                    <h5 class="mb-3">About</h5>
                                    <p class="lead mb-3">Ethan Leo is a seasoned and results-driven Project Manager who brings experience and expertise to project management. With a proven track record of successfully delivering complex projects on time and within budget, Ethan Leo is the go-to professional for organizations seeking efficient and effective project leadership.</p>
                                    <h5 class="mb-3">Profile</h5>
                                    <div class="row g-0">
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">First Name</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">Ethan</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Last Name</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">Leo</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Education</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">M.S Computer Science</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Address</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">Mountain View, California</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Country</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">United States</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Job</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">Project Manager</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Company</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">GitHub Inc</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Phone</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2">+1 (248) 679-8745</div>
                                        </div>
                                        <div class="col-5 col-md-3 bg-light border-bottom border-white border-3">
                                            <div class="p-2">Email</div>
                                        </div>
                                        <div class="col-7 col-md-9 bg-light border-start border-bottom border-white border-3">
                                            <div class="p-2"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8949d97b89d80999588949dd69b9795">[email&#160;protected]</a></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                    <form action="#!" class="row gy-3 gy-xxl-4">
                                        <div class="col-12">
                                            <div class="row gy-2">
                                                <label class="col-12 form-label m-0">Profile Image</label>
                                                <div class="col-12">
                                                    <img th:src="@{/assets/img/profile/profile-img-1.jpg}" class="img-fluid" alt="Luna John">
                                                </div>
                                                <div class="col-12">
                                                    <a href="#!" class="d-inline-block bg-primary link-light lh-1 p-2 rounded">
                                                        <i class="bi bi-upload"></i>
                                                    </a>
                                                    <a href="#!" class="d-inline-block bg-danger link-light lh-1 p-2 rounded">
                                                        <i class="bi bi-trash"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputFirstName" class="form-label">First Name</label>
                                            <input type="text" class="form-control" id="inputFirstName" value="Ethan">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputLastName" class="form-label">Last Name</label>
                                            <input type="text" class="form-control" id="inputLastName" value="Leo">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputEducation" class="form-label">Education</label>
                                            <input type="text" class="form-control" id="inputEducation" value="M.S Computer Science">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputSkills" class="form-label">Skills</label>
                                            <input type="text" class="form-control" id="inputSkills" value="HTML, SCSS, Javascript, React, Vue, Angular, UI, UX">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputJob" class="form-label">Job</label>
                                            <input type="text" class="form-control" id="inputJob" value="Project Manager">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputCompany" class="form-label">Company</label>
                                            <input type="text" class="form-control" id="inputCompany" value="GitHub Inc">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputPhone" class="form-label">Phone</label>
                                            <input type="tel" class="form-control" id="inputPhone" value="+12486798745">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputEmail" class="form-label">Email</label>
                                            <input type="email" class="form-control" id="inputEmail" value="leo@example.com">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputAddress" class="form-label">Address</label>
                                            <input type="text" class="form-control" id="inputAddress" value="Mountain View, California">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputCountry" class="form-label">Country</label>
                                            <select class="form-select" id="inputCountry">
                                                <option value="Afghanistan">Afghanistan</option>
                                                <option value="Åland Islands">Åland Islands</option>
                                                <option value="Albania">Albania</option>
                                                <option value="Algeria">Algeria</option>
                                                <option value="American Samoa">American Samoa</option>
                                                <option value="Andorra">Andorra</option>
                                                <option value="Angola">Angola</option>
                                                <option value="Anguilla">Anguilla</option>
                                                <option value="Antarctica">Antarctica</option>
                                                <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                                <option value="Argentina">Argentina</option>
                                                <option value="Armenia">Armenia</option>
                                                <option value="Aruba">Aruba</option>
                                                <option value="Australia">Australia</option>
                                                <option value="Austria">Austria</option>
                                                <option value="Azerbaijan">Azerbaijan</option>
                                                <option value="Bahamas">Bahamas</option>
                                                <option value="Bahrain">Bahrain</option>
                                                <option value="Bangladesh">Bangladesh</option>
                                                <option value="Barbados">Barbados</option>
                                                <option value="Belarus">Belarus</option>
                                                <option value="Belgium">Belgium</option>
                                                <option value="Belize">Belize</option>
                                                <option value="Benin">Benin</option>
                                                <option value="Bermuda">Bermuda</option>
                                                <option value="Bhutan">Bhutan</option>
                                                <option value="Bolivia">Bolivia</option>
                                                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                                                <option value="Botswana">Botswana</option>
                                                <option value="Bouvet Island">Bouvet Island</option>
                                                <option value="Brazil">Brazil</option>
                                                <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                                                <option value="Brunei Darussalam">Brunei Darussalam</option>
                                                <option value="Bulgaria">Bulgaria</option>
                                                <option value="Burkina Faso">Burkina Faso</option>
                                                <option value="Burundi">Burundi</option>
                                                <option value="Cambodia">Cambodia</option>
                                                <option value="Cameroon">Cameroon</option>
                                                <option value="Canada">Canada</option>
                                                <option value="Cape Verde">Cape Verde</option>
                                                <option value="Cayman Islands">Cayman Islands</option>
                                                <option value="Central African Republic">Central African Republic</option>
                                                <option value="Chad">Chad</option>
                                                <option value="Chile">Chile</option>
                                                <option value="China">China</option>
                                                <option value="Christmas Island">Christmas Island</option>
                                                <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                                                <option value="Colombia">Colombia</option>
                                                <option value="Comoros">Comoros</option>
                                                <option value="Congo">Congo</option>
                                                <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                                                <option value="Cook Islands">Cook Islands</option>
                                                <option value="Costa Rica">Costa Rica</option>
                                                <option value="Cote D'ivoire">Cote D'ivoire</option>
                                                <option value="Croatia">Croatia</option>
                                                <option value="Cuba">Cuba</option>
                                                <option value="Cyprus">Cyprus</option>
                                                <option value="Czech Republic">Czech Republic</option>
                                                <option value="Denmark">Denmark</option>
                                                <option value="Djibouti">Djibouti</option>
                                                <option value="Dominica">Dominica</option>
                                                <option value="Dominican Republic">Dominican Republic</option>
                                                <option value="Ecuador">Ecuador</option>
                                                <option value="Egypt">Egypt</option>
                                                <option value="El Salvador">El Salvador</option>
                                                <option value="Equatorial Guinea">Equatorial Guinea</option>
                                                <option value="Eritrea">Eritrea</option>
                                                <option value="Estonia">Estonia</option>
                                                <option value="Ethiopia">Ethiopia</option>
                                                <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                                                <option value="Faroe Islands">Faroe Islands</option>
                                                <option value="Fiji">Fiji</option>
                                                <option value="Finland">Finland</option>
                                                <option value="France">France</option>
                                                <option value="French Guiana">French Guiana</option>
                                                <option value="French Polynesia">French Polynesia</option>
                                                <option value="French Southern Territories">French Southern Territories</option>
                                                <option value="Gabon">Gabon</option>
                                                <option value="Gambia">Gambia</option>
                                                <option value="Georgia">Georgia</option>
                                                <option value="Germany">Germany</option>
                                                <option value="Ghana">Ghana</option>
                                                <option value="Gibraltar">Gibraltar</option>
                                                <option value="Greece">Greece</option>
                                                <option value="Greenland">Greenland</option>
                                                <option value="Grenada">Grenada</option>
                                                <option value="Guadeloupe">Guadeloupe</option>
                                                <option value="Guam">Guam</option>
                                                <option value="Guatemala">Guatemala</option>
                                                <option value="Guernsey">Guernsey</option>
                                                <option value="Guinea">Guinea</option>
                                                <option value="Guinea-bissau">Guinea-bissau</option>
                                                <option value="Guyana">Guyana</option>
                                                <option value="Haiti">Haiti</option>
                                                <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
                                                <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                                                <option value="Honduras">Honduras</option>
                                                <option value="Hong Kong">Hong Kong</option>
                                                <option value="Hungary">Hungary</option>
                                                <option value="Iceland">Iceland</option>
                                                <option value="India">India</option>
                                                <option value="Indonesia">Indonesia</option>
                                                <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
                                                <option value="Iraq">Iraq</option>
                                                <option value="Ireland">Ireland</option>
                                                <option value="Isle of Man">Isle of Man</option>
                                                <option value="Israel">Israel</option>
                                                <option value="Italy">Italy</option>
                                                <option value="Jamaica">Jamaica</option>
                                                <option value="Japan">Japan</option>
                                                <option value="Jersey">Jersey</option>
                                                <option value="Jordan">Jordan</option>
                                                <option value="Kazakhstan">Kazakhstan</option>
                                                <option value="Kenya">Kenya</option>
                                                <option value="Kiribati">Kiribati</option>
                                                <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
                                                <option value="Korea, Republic of">Korea, Republic of</option>
                                                <option value="Kuwait">Kuwait</option>
                                                <option value="Kyrgyzstan">Kyrgyzstan</option>
                                                <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                                                <option value="Latvia">Latvia</option>
                                                <option value="Lebanon">Lebanon</option>
                                                <option value="Lesotho">Lesotho</option>
                                                <option value="Liberia">Liberia</option>
                                                <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                                                <option value="Liechtenstein">Liechtenstein</option>
                                                <option value="Lithuania">Lithuania</option>
                                                <option value="Luxembourg">Luxembourg</option>
                                                <option value="Macao">Macao</option>
                                                <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
                                                <option value="Madagascar">Madagascar</option>
                                                <option value="Malawi">Malawi</option>
                                                <option value="Malaysia">Malaysia</option>
                                                <option value="Maldives">Maldives</option>
                                                <option value="Mali">Mali</option>
                                                <option value="Malta">Malta</option>
                                                <option value="Marshall Islands">Marshall Islands</option>
                                                <option value="Martinique">Martinique</option>
                                                <option value="Mauritania">Mauritania</option>
                                                <option value="Mauritius">Mauritius</option>
                                                <option value="Mayotte">Mayotte</option>
                                                <option value="Mexico">Mexico</option>
                                                <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                                                <option value="Moldova, Republic of">Moldova, Republic of</option>
                                                <option value="Monaco">Monaco</option>
                                                <option value="Mongolia">Mongolia</option>
                                                <option value="Montenegro">Montenegro</option>
                                                <option value="Montserrat">Montserrat</option>
                                                <option value="Morocco">Morocco</option>
                                                <option value="Mozambique">Mozambique</option>
                                                <option value="Myanmar">Myanmar</option>
                                                <option value="Namibia">Namibia</option>
                                                <option value="Nauru">Nauru</option>
                                                <option value="Nepal">Nepal</option>
                                                <option value="Netherlands">Netherlands</option>
                                                <option value="Netherlands Antilles">Netherlands Antilles</option>
                                                <option value="New Caledonia">New Caledonia</option>
                                                <option value="New Zealand">New Zealand</option>
                                                <option value="Nicaragua">Nicaragua</option>
                                                <option value="Niger">Niger</option>
                                                <option value="Nigeria">Nigeria</option>
                                                <option value="Niue">Niue</option>
                                                <option value="Norfolk Island">Norfolk Island</option>
                                                <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                                                <option value="Norway">Norway</option>
                                                <option value="Oman">Oman</option>
                                                <option value="Pakistan">Pakistan</option>
                                                <option value="Palau">Palau</option>
                                                <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
                                                <option value="Panama">Panama</option>
                                                <option value="Papua New Guinea">Papua New Guinea</option>
                                                <option value="Paraguay">Paraguay</option>
                                                <option value="Peru">Peru</option>
                                                <option value="Philippines">Philippines</option>
                                                <option value="Pitcairn">Pitcairn</option>
                                                <option value="Poland">Poland</option>
                                                <option value="Portugal">Portugal</option>
                                                <option value="Puerto Rico">Puerto Rico</option>
                                                <option value="Qatar">Qatar</option>
                                                <option value="Reunion">Reunion</option>
                                                <option value="Romania">Romania</option>
                                                <option value="Russian Federation">Russian Federation</option>
                                                <option value="Rwanda">Rwanda</option>
                                                <option value="Saint Helena">Saint Helena</option>
                                                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                                                <option value="Saint Lucia">Saint Lucia</option>
                                                <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
                                                <option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
                                                <option value="Samoa">Samoa</option>
                                                <option value="San Marino">San Marino</option>
                                                <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                                                <option value="Saudi Arabia">Saudi Arabia</option>
                                                <option value="Senegal">Senegal</option>
                                                <option value="Serbia">Serbia</option>
                                                <option value="Seychelles">Seychelles</option>
                                                <option value="Sierra Leone">Sierra Leone</option>
                                                <option value="Singapore">Singapore</option>
                                                <option value="Slovakia">Slovakia</option>
                                                <option value="Slovenia">Slovenia</option>
                                                <option value="Solomon Islands">Solomon Islands</option>
                                                <option value="Somalia">Somalia</option>
                                                <option value="South Africa">South Africa</option>
                                                <option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
                                                <option value="Spain">Spain</option>
                                                <option value="Sri Lanka">Sri Lanka</option>
                                                <option value="Sudan">Sudan</option>
                                                <option value="Suriname">Suriname</option>
                                                <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
                                                <option value="Swaziland">Swaziland</option>
                                                <option value="Sweden">Sweden</option>
                                                <option value="Switzerland">Switzerland</option>
                                                <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                                                <option value="Taiwan">Taiwan</option>
                                                <option value="Tajikistan">Tajikistan</option>
                                                <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                                                <option value="Thailand">Thailand</option>
                                                <option value="Timor-leste">Timor-leste</option>
                                                <option value="Togo">Togo</option>
                                                <option value="Tokelau">Tokelau</option>
                                                <option value="Tonga">Tonga</option>
                                                <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                                                <option value="Tunisia">Tunisia</option>
                                                <option value="Turkey">Turkey</option>
                                                <option value="Turkmenistan">Turkmenistan</option>
                                                <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                                                <option value="Tuvalu">Tuvalu</option>
                                                <option value="Uganda">Uganda</option>
                                                <option value="Ukraine">Ukraine</option>
                                                <option value="United Arab Emirates">United Arab Emirates</option>
                                                <option value="United Kingdom">United Kingdom</option>
                                                <option value="United States" selected>United States</option>
                                                <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
                                                <option value="Uruguay">Uruguay</option>
                                                <option value="Uzbekistan">Uzbekistan</option>
                                                <option value="Vanuatu">Vanuatu</option>
                                                <option value="Venezuela">Venezuela</option>
                                                <option value="Viet Nam">Viet Nam</option>
                                                <option value="Virgin Islands, British">Virgin Islands, British</option>
                                                <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
                                                <option value="Wallis and Futuna">Wallis and Futuna</option>
                                                <option value="Western Sahara">Western Sahara</option>
                                                <option value="Yemen">Yemen</option>
                                                <option value="Zambia">Zambia</option>
                                                <option value="Zimbabwe">Zimbabwe</option>
                                            </select>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputYouTube" class="form-label">YouTube</label>
                                            <input type="text" class="form-control" id="inputYouTube" value="https://www.youtube.com/EthanLeo">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputX" class="form-label">X</label>
                                            <input type="text" class="form-control" id="inputX" value="https://twitter.com/EthanLeo">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputFacebook" class="form-label">Facebook</label>
                                            <input type="text" class="form-control" id="inputFacebook" value="https://www.facebook.com/EthanLeo">
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label for="inputLinkedIn" class="form-label">LinkedIn</label>
                                            <input type="text" class="form-control" id="inputLinkedIn" value="https://www.linkedin.com/EthanLeo">
                                        </div>
                                        <div class="col-12">
                                            <label for="inputAbout" class="form-label">About</label>
                                            <textarea class="form-control" id="inputAbout">Ethan Leo is a seasoned and results-driven Project Manager who brings experience and expertise to project management. With a proven track record of successfully delivering complex projects on time and within budget, Ethan Leo is the go-to professional for organizations seeking efficient and effective project leadership.</textarea>
                                        </div>
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="email-tab-pane" role="tabpanel" aria-labelledby="email-tab" tabindex="0">
                                    <form action="#!">
                                        <fieldset class="row gy-3 gy-md-0">
                                            <legend class="col-form-label col-12 col-md-3 col-xl-2">Email Alerts</legend>
                                            <div class="col-12 col-md-9 col-xl-10">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="emailChange">
                                                    <label class="form-check-label" for="emailChange">
                                                        Email Changed
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="passwordChange">
                                                    <label class="form-check-label" for="passwordChange">
                                                        Password Changed
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="weeklyNewsletter">
                                                    <label class="form-check-label" for="weeklyNewsletter">
                                                        Weekly Newsletter
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="productPromotions">
                                                    <label class="form-check-label" for="productPromotions">
                                                        Product Promotions
                                                    </label>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="row">
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary mt-4">Save Changes</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="password-tab-pane" role="tabpanel" aria-labelledby="password-tab" tabindex="0">
                                    <form action="#!">
                                        <div class="row gy-3 gy-xxl-4">
                                            <div class="col-12">
                                                <label for="currentPassword" class="form-label">Current Password</label>
                                                <input type="password" class="form-control" id="currentPassword">
                                            </div>
                                            <div class="col-12">
                                                <label for="newPassword" class="form-label">New Password</label>
                                                <input type="password" class="form-control" id="newPassword">
                                            </div>
                                            <div class="col-12">
                                                <label for="confirmPassword" class="form-label">Confirm Password</label>
                                                <input type="password" class="form-control" id="confirmPassword">
                                            </div>
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary">Change Password</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--常见问题页面-->
    <section class="bsb-faq-3 pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Faqs">
        <!-- FAQs: My Account -->
        <div class="mb-8">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-11 col-xl-10">
                        <div class="d-flex align-items-end mb-5">
                            <i class="bi bi-person-gear me-3 lh-1 display-5"></i>
                            <h3 class="m-0">Your Account</h3>
                        </div>
                    </div>
                    <div class="col-11 col-xl-10">
                        <div class="accordion accordion-flush" id="faqAccount">
                            <div class="accordion-item bg-transparent border-top border-bottom py-3">
                                <h2 class="accordion-header" id="faqAccountHeading1">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqAccountCollapse1" aria-expanded="false" aria-controls="faqAccountCollapse1">
                                        What is an account?
                                    </button>
                                </h2>
                                <div id="faqAccountCollapse1" class="accordion-collapse collapse" aria-labelledby="faqAccountHeading1">
                                    <div class="accordion-body">
                                        <p>An account is a personal or organizational record that allows you to access and manage various services, often requiring authentication through a username and password.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqAccountHeading2">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqAccountCollapse2" aria-expanded="false" aria-controls="faqAccountCollapse2">
                                        How do I create an account?
                                    </button>
                                </h2>
                                <div id="faqAccountCollapse2" class="accordion-collapse collapse" aria-labelledby="faqAccountHeading2">
                                    <div class="accordion-body">
                                        <p>To create an account, visit the website or application and look for a "Sign Up" or "Create Account" button. Follow the instructions to enter your information and create a username and password.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqAccountHeading3">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqAccountCollapse3" aria-expanded="false" aria-controls="faqAccountCollapse3">
                                        How do I secure my account?
                                    </button>
                                </h2>
                                <div id="faqAccountCollapse3" class="accordion-collapse collapse" aria-labelledby="faqAccountHeading3">
                                    <div class="accordion-body">
                                        <p>To secure your account, use a robust and unique password, enable two-factor authentication if available, and be cautious about sharing your login information. Regularly update your password and avoid using easily guessable information like birthdays or names.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqAccountHeading4">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqAccountCollapse4" aria-expanded="false" aria-controls="faqAccountCollapse4">
                                        What should I do if I forget my password?
                                    </button>
                                </h2>
                                <div id="faqAccountCollapse4" class="accordion-collapse collapse" aria-labelledby="faqAccountHeading4">
                                    <div class="accordion-body">
                                        <p>If you forget your password, most websites and services offer a "Forgot Password" or "Reset Password" option. Follow the steps to reset your password, often involving an email or SMS verification.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqAccountHeading5">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqAccountCollapse5" aria-expanded="false" aria-controls="faqAccountCollapse5">
                                        What should I do if my account is compromised or hacked?
                                    </button>
                                </h2>
                                <div id="faqAccountCollapse5" class="accordion-collapse collapse" aria-labelledby="faqAccountHeading5">
                                    <div class="accordion-body">
                                        <p>If you suspect your account has been compromised, change your password immediately. Contact the service provider for further assistance, and consider enabling two-factor authentication for added security.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- FAQs: Placing an Order -->
        <div class="mb-8">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-11 col-xl-10">
                        <div class="d-flex align-items-end mb-5">
                            <i class="bi bi-cart-plus me-3 lh-1 display-5"></i>
                            <h3 class="m-0">Placing an Order</h3>
                        </div>
                    </div>
                    <div class="col-11 col-xl-10">
                        <div class="accordion accordion-flush" id="faqOrder">
                            <div class="accordion-item bg-transparent border-top border-bottom py-3">
                                <h2 class="accordion-header" id="faqOrderHeading1">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqOrderCollapse1" aria-expanded="false" aria-controls="faqOrderCollapse1">
                                        Do I need to create an account to place an order?
                                    </button>
                                </h2>
                                <div id="faqOrderCollapse1" class="accordion-collapse collapse" aria-labelledby="faqOrderHeading1">
                                    <div class="accordion-body">
                                        <p>You can order as a guest if you create an account. However, creating an account allows for faster checkout and order tracking.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqOrderHeading2">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqOrderCollapse2" aria-expanded="false" aria-controls="faqOrderCollapse2">
                                        Can I change or cancel my order after it's been placed?
                                    </button>
                                </h2>
                                <div id="faqOrderCollapse2" class="accordion-collapse collapse" aria-labelledby="faqOrderHeading2">
                                    <div class="accordion-body">
                                        <p>Orders can be modified or canceled within a short time after placing them. Contact our customer support as soon as possible to make any changes.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqOrderHeading3">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqOrderCollapse3" aria-expanded="false" aria-controls="faqOrderCollapse3">
                                        What payment methods do you accept?
                                    </button>
                                </h2>
                                <div id="faqOrderCollapse3" class="accordion-collapse collapse" aria-labelledby="faqOrderHeading3">
                                    <div class="accordion-body">
                                        <p>We accept various payment methods, including credit/debit cards, PayPal, and other online payment options. You can choose your preferred payment method during the checkout process.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqOrderHeading4">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqOrderCollapse4" aria-expanded="false" aria-controls="faqOrderCollapse4">
                                        Is my payment information secure?
                                    </button>
                                </h2>
                                <div id="faqOrderCollapse4" class="accordion-collapse collapse" aria-labelledby="faqOrderHeading4">
                                    <div class="accordion-body">
                                        <p>Yes, we take security seriously. We use industry-standard encryption to protect your payment information, and we do not store your payment details on our servers.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqOrderHeading5">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqOrderCollapse5" aria-expanded="false" aria-controls="faqOrderCollapse5">
                                        How do I track the status of my order?
                                    </button>
                                </h2>
                                <div id="faqOrderCollapse5" class="accordion-collapse collapse" aria-labelledby="faqOrderHeading5">
                                    <div class="accordion-body">
                                        <p>You can track your order by logging into your account (if you have one) and accessing the order history. We'll also send you email updates as your order progresses through the fulfillment process.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- FAQs: Refunds and Exchanges -->
        <div class="mb-0">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-11 col-xl-10">
                        <div class="d-flex align-items-end mb-5">
                            <i class="bi bi-bag-dash me-3 lh-1 display-5"></i>
                            <h3 class="m-0">Refunds and Exchanges</h3>
                        </div>
                    </div>
                    <div class="col-11 col-xl-10">
                        <div class="accordion accordion-flush" id="faqRefund">
                            <div class="accordion-item bg-transparent border-top border-bottom py-3">
                                <h2 class="accordion-header" id="faqRefundHeading1">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqRefundCollapse1" aria-expanded="false" aria-controls="faqRefundCollapse1">
                                        How do I request a refund or exchange?
                                    </button>
                                </h2>
                                <div id="faqRefundCollapse1" class="accordion-collapse collapse" aria-labelledby="faqRefundHeading1">
                                    <div class="accordion-body">
                                        <p>To request a refund or exchange, please follow these steps:</p>
                                        <ul>
                                            <li>Contact our customer support team within 30 days of the purchase.</li>
                                            <li>Provide your order number and a detailed reason for the request.</li>
                                            <li>Wait for our customer support team to assess your request and provide further instructions.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqRefundHeading2">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqRefundCollapse2" aria-expanded="false" aria-controls="faqRefundCollapse2">
                                        What items are eligible for a refund or exchange?
                                    </button>
                                </h2>
                                <div id="faqRefundCollapse2" class="accordion-collapse collapse" aria-labelledby="faqRefundHeading2">
                                    <div class="accordion-body">
                                        <p>Eligible items for a refund or exchange must meet the following criteria:</p>
                                        <ul>
                                            <li>They are in their original condition, unused, and in their original packaging.</li>
                                            <li>The request is made within the specified timeframe.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqRefundHeading3">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqRefundCollapse3" aria-expanded="false" aria-controls="faqRefundCollapse3">
                                        What if I receive a damaged or defective item?
                                    </button>
                                </h2>
                                <div id="faqRefundCollapse3" class="accordion-collapse collapse" aria-labelledby="faqRefundHeading3">
                                    <div class="accordion-body">
                                        <p>If you receive a damaged or defective item, please contact our customer support team immediately. We will guide you on the return process and offer a refund or replacement, as appropriate.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqRefundHeading4">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqRefundCollapse4" aria-expanded="false" aria-controls="faqRefundCollapse4">
                                        Who covers the shipping costs for exchanges?
                                    </button>
                                </h2>
                                <div id="faqRefundCollapse4" class="accordion-collapse collapse" aria-labelledby="faqRefundHeading4">
                                    <div class="accordion-body">
                                        <p>Shipping costs for returning the item for an exchange and sending the new item are usually the responsibility of the customer, unless the exchange is due to an error on our part.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item bg-transparent border-bottom py-3">
                                <h2 class="accordion-header" id="faqRefundHeading5">
                                    <button class="accordion-button collapsed bg-transparent fw-bold shadow-none link-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faqRefundCollapse5" aria-expanded="false" aria-controls="faqRefundCollapse5">
                                        Can I change my mind and cancel my refund or exchange request?
                                    </button>
                                </h2>
                                <div id="faqRefundCollapse5" class="accordion-collapse collapse" aria-labelledby="faqRefundHeading5">
                                    <div class="accordion-body">
                                        <p>If you change your mind about a refund or exchange request, please contact our customer support team as soon as possible. We will do our best to accommodate your request, but once a refund or exchange is processed, it may not be reversible.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</html>